<template>
  <div>
    <el-form :model="searchForm" label-width="90px">
      <el-form-item label="名称搜索">
        <el-input v-model="searchForm.brandName" placeholder="输入内容模糊查询品牌名称" clearable>
          <template slot="append">
            <el-button @click="loadNode(node,resolve)">查询</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 15px;margin-left: 20px">
      <el-tag class="tag" type="success" :effect="lsi === -1 ? 'dark' : 'plain'" @click="changeTag(-1,'')">全部</el-tag>
      <el-tag v-for="(a,i) of ls" :key="a" class="tag" type="success" :effect="lsi === i ? 'dark' : 'plain'" @click="changeTag(i,a)">{{a}}</el-tag>
    </div>
    <el-card style="height: 440px;overflow: auto">
      <div style="margin-bottom: 10px">
        <el-button size="mini" type="primary" @click="openDialog()">添加</el-button>
      </div>
      <el-tree style="width: 50%" :props="props" :load="loadNode" node-key="brand"   ref="brand" :expand-on-click-node="false" lazy show-checkbox>
         <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level < 3" type="primary" size="mini" @click="() => openDialog(data)">
            添加
          </el-button>
          <el-button v-if="data.child === 0" type="danger" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
          <el-button type="warning" size="mini" @click="() => openDialog('',data.id)">
            修改
          </el-button>
        </span>
      </span>
      </el-tree>
    </el-card>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,15,25,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    <brand-update ref="brandUpdate" @closeDialog="loadNode(node,resolve)"/>
  </div>
</template>

<script>
import BrandUpdate from '@/views/brand/BrandUpdate.vue'
const searchForm = {
  parentId: '',
  brandName: '',
  firstLetter: ''
}
const pageInfo = {
  page: 1,
  limit: 15,
  total: 0
}
export default {
  name: 'BrandList',
  components: { BrandUpdate },
  data () {
    return {
      searchForm: { ...searchForm },
      pageInfo: { ...pageInfo },
      brandList: [],
      props: {
        label: 'brandName',
        isLeaf: 'leaf'
      },
      node: '',
      resolve: '',
      ls: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
      effect: 'plain',
      lsi: -1
    }
  },
  methods: {
    loadNode (node, resolve) {
      if (node.level === 0) {
        this.node = node
        this.resolve = resolve
      } else {
        this.searchForm = { ...searchForm }// 展开子节点时清空查询条件
      }
      node.childNodes = []
      this.searchForm.parentId = node.data?.id ?? 0
      this.$http.get('brand/page', { ...this.searchForm, ...this.pageInfo }).then(data => {
        if (data) {
          const rows = data.rows.map(item => {
            return {
              ...item,
              leaf: item.child === 0
            }
          })
          if (node.level === 0) {
            this.pageInfo.total = data.count
            return resolve(rows)
          } else {
            resolve(rows)
          }
        }
      })
    },
    currentChange (page) {
      this.pageInfo.page = page
      this.loadNode(this.node, this.resolve)
    },
    sizeChange (limit) {
      this.pageInfo.limit = limit
      this.loadNode(this.node, this.resolve)
    },
    openDialog (data, id) {
      let ps = null
      if (data) {
        if (data.ps) {
          ps = data.ps.concat('-' + data.id).split('-').map(item => parseInt(item))
        } else {
          ps = [data.id]
        }
      } else {
        ps = [0]
      }
      this.$refs.brandUpdate.init(ps, id)
    },
    remove (node, data) {
      this.$confirm(`确定删除[${data.brandName}]吗?`, '询问', { type: 'info' }).then(() => {
        this.$http.delete(`brand/delete/${data.id}`).then(() => {
          this.$message.success('删除成功！')
          this.loadNode(this.node, this.resolve)
        })
      }).catch(() => {})
    },
    changeTag (index, firstLetter) {
      this.lsi = index
      this.searchForm.firstLetter = firstLetter
      this.loadNode(this.node, this.resolve)
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tag{
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
<style>
.el-tree-node__content{
  height: 35px;
}
</style>
